import React from 'react';
import { useNavigate } from 'react-router-dom';

const VideoList: React.FC = () => {
  const navigate = useNavigate();

  // 模拟视频列表数据
  const videos = [
    { id: 1, title: '示例视频 1' },
    { id: 2, title: '示例视频 2' },
    { id: 3, title: '示例视频 3' },
  ];

  return (
    <div className="video-list-container">
      <div className="page-header">
        <button
          className="back-button"
          onClick={() => navigate('/')}
        >
          返回首页
        </button>
        <h2>视频列表</h2>
      </div>
      <div className="video-grid">
        {videos.map(video => (
          <div
            key={video.id}
            className="video-item"
            onClick={() => navigate(`/player/${video.id}`)}
          >
            <h3>{video.title}</h3>
          </div>
        ))}
      </div>
    </div>
  );
};

export default VideoList;